<template>
  <div class="goodsList">
    <van-nav-bar
      title="商品列表"
      left-text="返回"
      nav-bar-text-color="@white"
      left-arrow
      @click-left="onClickLeft"
    />
    <div class="top-search">
      <div class="w">
        <div class="top">
          <form class="search">
            <i class="iconfont icon-magnifier"></i>
            <input
              type="search"
              placeholder="请输入关键字"
              v-model="keywords"
              @keydown.13.prevent="
                  $router.push({path:'/goodsSearch?keywords=' + keywords,query:{path:'/goodsList'}})
              "
            />
            <!-- 为啥这样也能接收到keywords？push解析字符串？ -->
          </form>
        </div>

        <div class="nav">
          <ul>
            <li><a href="#" class="recommend">综合推荐</a></li>
            <li><a href="#">销量</a></li>
            <li>
              <a href="#"
                >价格<i class="iconfont icon-icon_-shangxiajiantou"></i
              ></a>
            </li>
            <li><a href="#">好评度</a></li>
            <li><a href="#">店铺</a></li>
            <li>
              <a href="#"><i class="iconfont icon-shaixuan"></i>筛选</a>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <van-empty description="暂无数据~去逛逛~" v-if="goodList === null">
      <van-button
        color="linear-gradient(to right, #ff6034, #ee0a24)"
        round
        @click="$router.push('/index/home')"
      >
        随便逛逛
      </van-button>
    </van-empty>
    <!-- 商品展示 -->
    <div class="show" v-else>
      <div class="inner">
        <article>
          <section
            v-for="item in goodList"
            :key="item.id"
            @click="goDetails(item.id)"
          >
            <img :src="$pregImg + item.img" alt="" />
            <div>
              <p>{{ item.goodsname }}</p>

              <p>
                <span style="color: #eb775e">&yen;{{ item.price }}&nbsp;</span>
                <span style="text-decoration: line-through"
                  >&yen;{{ item.market_price }}</span
                >
              </p>
              <div class="red">11.11限时209元起</div>
              <p><span>999条评论</span> <span>99.9%好评</span></p>
            </div>
          </section>
        </article>
      </div>
    </div>
  </div>
</template>

<script>
import { mapActions, mapGetters } from "vuex";
export default {
  data() {
    return {
      keywords: "",
    };
  },
  computed: {
    ...mapGetters({
      goodList: "goodsList/goodsList",
    }),
    id() {
      return this.$route.query.id;
    },
  },
  methods: {
    ...mapActions({
      requestGoodsList: "goodsList/goodsActions",
    }),
    goDetails(id) {
      this.$router.push({
        path: "/details/" + id,
        query:{
          keywords:this.keywords
        }
      });
    },
    onClickLeft() {
      this.$toast.success("返回到上一级");
      this.$router.push("/index/cate");
    },
  },
  mounted() {
    // let id=this.id;
    // console.log();
    this.requestGoodsList([this.$route.query.cateid, 2]);
     document.title=this.$route.meta.title
  },
};
</script>

<style scoped>
/* * 顶部返回字体样式  */
/deep/.van-nav-bar {
  background: #ff6040;
}
/deep/ .van-nav-bar__title {
  font-size: 0.18rem;
  font-weight: bold;
  color: #fff;
}
/deep/ .van-nav-bar__text {
  font-size: 0.12rem;
  color: #fff;
}
/deep/ .van-nav-bar .van-icon {
  font-size: 0.12rem;
  color: #fff;
}

/deep/ [class*="van-hairline"]::after {
  border: none;
}
/deep/ .van-nav-bar__content {
  height: 48px;
}
</style>